<template>
  <el-card class="box-card salevisit-card">
    <div slot="header" class="clearfix">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="销售额" name="sale" />
        <el-tab-pane label="访问量" name="visit" />
      </el-tabs>
      <div>
        <span @click="handleSetToday">今日</span>
        <span @click="handleSetToWeek">本周</span>
        <span @click="handleSetToMonth">本月</span>
        <span @click="handleSetToYear">本年</span>
        <el-date-picker
          v-model="date"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="mini"
          :picker-options="pickerOptions"
        />
      </div>
    </div>
    <el-row :gutter="10">
      <el-col class="salevisit-col" :sm="24" :lg="18">
        <SaveVisitChart />
      </el-col>
      <el-col class="salevisit-col" :sm="24" :lg="6">
        <span class="salevisit-span">门店销售额排名</span>
        <div class="salevisit-rank">
          <div>
            <span class="salevisit-index index-highlight">1</span
            ><span>肯德基</span>
          </div>
          <span>323,234</span>
        </div>
        <div class="salevisit-rank">
          <div>
            <span class="salevisit-index index-highlight">2</span
            ><span>麦当劳</span>
          </div>
          <span>299,132</span>
        </div>
        <div class="salevisit-rank">
          <div>
            <span class="salevisit-index index-highlight">3</span
            ><span>德克士</span>
          </div>
          <span>283,998</span>
        </div>
        <div class="salevisit-rank">
          <div><span class="salevisit-index">4</span><span>海底捞</span></div>
          <span>266,223</span>
        </div>
        <div class="salevisit-rank">
          <div><span class="salevisit-index">5</span><span>汉堡王</span></div>
          <span>219,663</span>
        </div>
        <div class="salevisit-rank">
          <div><span class="salevisit-index">6</span><span>真功夫</span></div>
          <span>200,997</span>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import dayjs from 'dayjs'
import SaveVisitChart from './components/SaveVisitChart.vue'

export default {
  name: 'SaleVisit',
  components: {
    SaveVisitChart
  },
  data() {
    return {
      // tab切换选择
      activeName: 'sale',
      // 选择日期
      date: [],
      // 设置星期一为每周第一天
      pickerOptions: {
        firstDayOfWeek: 1
      }
    }
  },
  methods: {
    // 点击切换tab组件
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 今日
    handleSetToday() {
      const today = dayjs().format('YYYY-MM-DD')
      this.date = [today, today]
    },
    // 本周
    handleSetToWeek() {
      let today = dayjs()
      if (today.day() === 0) {
        today = today.subtract(1, 'day')
      }
      const start = today
        .startOf('week')
        .add(1, 'day')
        .format('YYYY-MM-DD')
      const end = today
        .endOf('week')
        .add(1, 'day')
        .format('YYYY-MM-DD')
      this.date = [start, end]
    },
    // 本月
    handleSetToMonth() {
      const start = dayjs()
        .startOf('month')
        .format('YYYY-MM-DD')
      const end = dayjs()
        .endOf('month')
        .format('YYYY-MM-DD')
      this.date = [start, end]
    },
    // 本年
    handleSetToYear() {
      const start = dayjs()
        .startOf('year')
        .format('YYYY-MM-DD')
      const end = dayjs()
        .endOf('year')
        .format('YYYY-MM-DD')
      this.date = [start, end]
    }
  }
}
</script>

<style lang="scss" scoped>
.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    font-size: 14px;
    margin-right: 20px;
  }
}
.clearfix:before,
.clearfix:after {
  display: none;
}
// 销售额趋势
.salevisit-span {
  display: inline-block;
  margin: 15px 0;
  font-size: 14px;
}
// 排名
.salevisit-rank {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
// 门店序号
.salevisit-index {
  display: inline-block;
  margin-right: 30px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  // background-color: red;
  text-align: center;
  border-radius: 50%;
  &.index-highlight {
    background-color: black;
    color: white;
  }
}
</style>
